<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test {
            color:#f00;
        }
    </style>
</head>
<body>
    <h2 class="title">React演示--jsx</h2>
    <div id="root"></div>
    
</body>
<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<script src="./lib/babel.min.js"></script>
<script type="text/babel">
    //获取dom
    const box=document.querySelector('#root')
    //创建一个react根元素
    const root=ReactDOM.createRoot(box)

    function List() {
        const userArr=[
            {id:1,name:'张三',address:'北京'},
            {id:2,name:'李四',address:'天津'},
            {id:3,name:'王五',address:'上海'},
            {id:4,name:'马六',address:'河南'},
        ]

        
        return <div>
               { userArr.length>0 ?  <ul>
                  {userArr.map(item=>{
                        return <ListItem  key={ item.id } {...item} />
                    })  }
                </ul>:<p>已经没有数据了</p> }
              </div>
    }

    function ListItem(props) {
        console.log('props:',props)
        return <li>
                姓名：{ props.name }
                <span>地址：{ props.address }</span>
                <button>删除</button>
                </li>
    }
  
    //函数式组件
    function App() {
       return  <div>
            <h2>我是一个app根组件</h2>
            <List />
        </div> 
    }

    //渲染
    root.render(<App />)


</script>
</html>